import React from "react";
import {Component} from 'react'
import './index.css'

const myContext = React.createContext()
const {Provider, Consumer} = myContext

class A extends Component {
    state = {
        userName: '张三',
        age: 12
    }

    render() {
        const {userName, age} = this.state
        return <div className={'parent'}>
            <h3>我是A组件</h3>
            <h2>我的用户名是：{userName}</h2>
            <Provider value={{userName, age}}>
                <B/>
            </Provider>
        </div>
    }
}

class B extends Component {
    //使用Context的第一种方法
    static contextType=myContext
    render() {
        return <div className={'child'}>
            <h3>我是B组件</h3>
            {/*使用Context的第一种方法*/}
            我父亲的用户名是：{this.context.userName}

            {/*使用Context的第二种方法*/}
            {/*<Consumer>*/}
            {/*    {value => `我父亲的用户名是：${value.userName}`}*/}
            {/*</Consumer>*/}
            <C/>
        </div>
    }
}

class C extends Component {
    //使用Context的第一种方法
    // static contextType=myContext
    render() {
        //使用Context的第一种方法
        // console.log(this.context)
        return <div className={'grand'}>
            <h3>我是C组件</h3>
            {/*使用Context的第一种方法*/}
            {/*<h2>我从A组件收到的的用户名是：{this.context.userName},年龄是：{this.context.age}</h2>*/}

           {/*使用Context的第二种方法*/}
            <Consumer>
                {value => (<h2>我从A组件收到的的用户名是：{value.userName},年龄是：{value.age}</h2>)}
            </Consumer>
        </div>
    }
}

//函数式组件用context时可以用Consumer(类式组件也可以用)
// function C() {
//     return <div className={'grand'}>
//         <h3>我是C组件</h3>
//         <h2>
//             <Consumer>
//                 {value => (`我从A组件收到的的用户名是：${value.userName},年龄是：${value.age}`)}
//             </Consumer>
//         </h2>
//     </div>
// }

export default A